<template>
  <div class="app-container">

    <el-table
      :header-cell-style="tableHeaderColor"
      class="datalist"
      :data="postList"
      :height="tableHeight"
      ref="multipleTable"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item :label="$t('anchor.FirmwareVersion')">
              <span>{{ props.row.firmwareUwb }}</span>
            </el-form-item>
            <el-form-item :label="$t('anchor.firmwareBle')">
              <span>{{ props.row.firmwareBle }}</span>
            </el-form-item>
            <el-form-item :label="$t('anchor.firmwareWifi')">
              <span>{{ props.row.firmwareWifi }}</span>
            </el-form-item>
            <el-form-item :label="$t('anchor.runningInfoHbTs')">
              <span>{{ props.row.runningInfoHbTs }}</span>
            </el-form-item>
            <el-form-item :label="$t('anchor.runningInfoMeTs')">
              <span>{{ props.row.runningInfoMeTs }}</span>
            </el-form-item>
            <el-form-item :label="$t('anchor.rtInfoNowTs')">
              <span>{{ props.row.rtInfoNowTs }}</span>
            </el-form-item>
            <el-form-item :label="$t('anchor.rtInfoSyncOrder')">
              <span>{{ props.row.rtInfoSyncOrder }}</span>
            </el-form-item>
            <el-form-item :label="$t('anchor.rtInfoTxPower')">
              <span>{{ props.row.rtInfoTxPower }}</span>
            </el-form-item>
            <el-form-item :label="$t('anchor.rtInfoNowIp')">
              <span>{{ props.row.rtInfoNowIp }}</span>
            </el-form-item>
            <el-form-item :label="$t('anchor.netcountTxBps')">
              <span>{{ props.row.netcountTxBps }}</span>
            </el-form-item>
            <el-form-item :label="$t('anchor.netcountTxBytes')">
              <span>{{ props.row.netcountTxBytes }}</span>
            </el-form-item>
            <el-form-item :label="$t('anchor.netcountTxCount')">
              <span>{{ props.row.netcountTxCount }}</span>
            </el-form-item>
            <el-form-item :label="$t('anchor.netcountRxBps')">
              <span>{{ props.row.netcountRxBps }}</span>
            </el-form-item>
            <el-form-item :label="$t('anchor.netcountRxBytes')">
              <span>{{ props.row.netcountRxBytes }}</span>
            </el-form-item>
            <el-form-item :label="$t('anchor.netcountRxCount')">
              <span>{{ props.row.netcountRxCount }}</span>
            </el-form-item>
            <el-form-item :label="$t('anchor.ccpRxCount')">
              <span>{{ props.row.ccpRxCount }}</span>
            </el-form-item>
            <el-form-item :label="$t('anchor.ccpTxCount')">
              <span>{{ props.row.ccpTxCount }}</span>
            </el-form-item>
            <el-form-item :label="$t('anchor.ccpStddev')">
              <span>{{ props.row.ccpStddev }}</span>
            </el-form-item>
            <el-form-item :label="$t('operating.createTime')">
              <span>{{ props.row.createTime }}</span>
            </el-form-item>
            <el-form-item :label="$t('operating.creator')">
              <span>{{ props.row.creator }}</span>
            </el-form-item>
            <el-form-item :label="$t('operating.updateTime')">
              <span>{{ props.row.updateTime }}</span>
            </el-form-item>
            <el-form-item :label="$t('operating.updator')">
              <span>{{ props.row.updator }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <!--基站ID-->
      <el-table-column
        prop="anchorId"
        :label="$t('anchor.anchorId')"
        min-width="100"
      ></el-table-column>
      <!--引擎ID-->
      <el-table-column
        prop="lcId"
        :label="$t('anchor.lcId')"
        min-width="100"
      ></el-table-column>
      <!--基站状态-->
      <el-table-column
        prop="state"
        :label="$t('anchor.anchorState')"
        :formatter="anchorState"
        min-width="80"
      ></el-table-column>
      <!--固件版本-uwb-->
      <el-table-column
        prop="hardware"
        :label="$t('anchor.hardware')"
        min-width="100"
      ></el-table-column>
      <!--电池电量-->
      <el-table-column
        prop="rtInfoVbat"
        :label="$t('anchor.rtInfoVbat')"
        min-width="80"
      ></el-table-column>
      <!--首次上线IP地址-->
      <el-table-column
        prop="firstFindIp"
        :label="$t('anchor.firstFindIp')"
        min-width="120"
      ></el-table-column>
      <!--首次上线时间-->
      <el-table-column
        prop="firstFindTs"
        :label="$t('anchor.firstFindTs')"
        min-width="120"
      ></el-table-column>
      <el-table-column :label="$t('operating.operating')" width="280">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleOperation(scope.$index, scope.row, '1')"
            :disabled="scope.row.state === 0"
            >{{ $t("anchor.upgrade") }}</el-button
          >
          <el-button
            size="mini"
            type="warning"
            @click="handleOperation(scope.$index, scope.row, '2')"
            :disabled="scope.row.state === 0"
            >{{ $t("anchor.Restart") }}</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleOperation(scope.$index, scope.row, '3')"
            :disabled="scope.row.state === 0"
            >{{ $t("anchor.Reset") }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 25, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      /*********************表格相关*********************/
      tableHeight: window.innerHeight - 240,
      tableData: [], //表格模拟数据
      currentPage: 1, //当前所在页
      total: 0, //总页数
      pageSize: "10", //
      dataBaseUrl: "//192.168.1.92:8006/",
      operationParam: {
        type: "",
        deviceId: "",
      },
    };
  },
  //  已经完成模板渲染或者el对应的html渲染后
  mounted() {
    this.windowRefresh();
    let self = this;
    window.onresize = function temp() {
      self.windowRefresh();
    };

    this.getData();
  },

  methods: {
    //刷新窗口
    windowRefresh: function () {
      this.tableHeight = window.innerHeight - 250;
    },
    //格式转换
    anchorState(row, column) {
      if (row.state == 0) {
        return "离线";
      } else if (row.state == 1) {
        return "在线";
      }
    },
    // 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "color:#1f59ad;";
      }
    },
    // //格式转换
    // timeChange(row, column){
    //   return this.timeConvert(row.firstFindTs)
    // },
    getData() {
      let param = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      };

      this.$api.anchorManage
        .getListData(this.dataBaseUrl, param)
        .then((res) => {
          let RES = this.responseUse(res);
          this.total = RES.totalSize;
          this.tableData = RES.content;
        });
    },
    //分页导航
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(this.multipleSelection);
    },
    //行操作按钮响应
    handleOperation(index, row, type) {
      if (row.anchorId === null || row.anchorId === "") {
        this.v_MyMessage(this.$t("operating.operationFailed"));
        return;
      }
      this.operationParam.deviceId = row.anchorId;
      this.operationParam.type = type;
      this.$api.anchorManage
        .operationAnchor(this.dataBaseUrl, this.operationParam)
        .then((res) => {
          let RES = this.responseUse(res, true);
          if (RES) {
            this.getData();
          }
        });
    },
  },
};
</script>

<style>
</style>